<template>
  <div class="index">
    <H />
    <div class="banenr_bg">
      <div class="bg_t"></div>
      <div class="bg_b"></div>
      <div class="bg_tab">
        <ul>
          <li @click="openview(item.path)" v-for="(item,index) in routers" :key="index">
            <p>
              <i :class="item.meta.icon"></i>
              <span>{{item.meta.title}}</span>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="echarts">
      <div class="UseAmount">
        <div v-if="EnergyType[0] === 1&&EnergyType[1] === 1">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="index === 0?'实时负荷曲线':'实时蒸汽曲线'" :name="index === 0?'D':'Q'" v-for="(item,index) in EnergyType" :key="index"></el-tab-pane>
          </el-tabs>
        </div>

        <!-- <h3>用能统计</h3> -->
        <div class="top" v-if="activeName === 'D'">
          <span style="color:#0780ED">{{RatedPower_sum}} %</span>
          <p>当前负荷率</p>
        </div>
        <div class="top">
          <span>
            {{activeName === 'D'?UseAmount.currentDayElectric:UseAmount.currentDaySteam}}
            <i>{{activeName === 'D'?'kWh':'t'}}</i>
          </span>
          <P>
            <i class="iconfont icon-dangrifahuo" /> 当日用电量
          </P>
        </div>
        <div class="top">
          <span>
            {{activeName === 'D'?UseAmount.lastDayElectric:UseAmount.lastDaySteam}}
            <i>{{activeName === 'D'?'kWh':'t'}}</i>
          </span>
          <P>
            <i class="iconfont icon-dangrifahuo" /> 昨日用电量
          </P>
        </div>
        <div style="border:none" class="top">
          <span>
            {{activeName === 'D'?UseAmount.currentMonthElectric:UseAmount.currentMonthSteam}}
            <i>{{activeName === 'D'?'万kWh':'t'}}</i>
          </span>
          <P>
            <i class="iconfont icon-dangrifahuo" /> 当月用电量
          </P>
        </div>
      </div>
      <div class="ecline">
        <ecline width="100%" v-loading="ec_data_loading" height="100%" :ecdata="ec_data" :unit="unit"></ecline>
      </div>

      <!-- <div>
        <ecline width="100%" height="100%" :ecdata="ec_data" :unit="unit"></ecline>
      </div>-->
    </div>
    <div></div>
  </div>
</template>
<script>
import './index.scss'
import banner_bg from './index_banner.png'
import H from '@/components/header/index'
import ecline from '@/components/echarts/index_ec_line'
import { mapGetters } from 'vuex'
export default {
  components: {
    H,
    ecline
  },
  watch: {
  },
  data() {
    return {
      ec_data_loading: true,
      activeName: 'D',
      banner_bg: banner_bg,
      ec_data: [],
      unit: '',
      RatedPower_sum: '',
      UseAmount: {
        currentDayElectric: '--',
        lastDayElectric: '--',
        currentMonthElectric: '--'

      },
      EnergyType: JSON.parse(sessionStorage.getItem('EnergyType'))
    };
  },
  computed: {
    ...mapGetters([
      'addRouters',
    ]),
    routers() {
      return this.addRouters.filter((item, index, array) => {
        return (!item.hidden)
      })
    }
  },
  mounted() {
  },
  watch: {
  },
  created() {
    // 获取企业的全场负荷标准
    this.getRatedPower();
    // 首页查询用量
    this.getUseAmount()
  },
  methods: {
    handleClick(tab) {
      this.ec_data_loading = true
      if (tab.name === 'D') {
        this.getLoadLineDiagram();
      } else {
        this.getSteamInstantLineChart()
      }
    },
    // 首页查询用量
    getUseAmount() {
      this.$axios.post(this.Eelec + "/index/getUseAmount", {
        custID: sessionStorage.getItem('custId')
      })
        .then(res => {
          if (res.data.code === 200) {
            // 配电室的负荷率折线图
            this.getLoadLineDiagram();
            // 蒸汽
            this.getSteamInstantLineChart()
            if (res.data.data) {
              this.UseAmount = res.data.data
            }
          }
        })
        .catch(err => {
          console.log(err)
        });
    },
    // 蒸汽
    getSteamInstantLineChart() {
      this.$axios
        .post(this.Eelec + "/index/getSteamInstantLineChart", {
          custID: sessionStorage.getItem('custId')
        })
        .then(res => {
          this.ec_data_loading = false
          if (res.data.code === 200) {
            if (res.data.data !== null && res.data.data.length) {
              // this.Steam_show = true
              // this.Steam_data[0].rmiSamplDataRespList.dataResp = res.data.data
              this.unit = 't/h'
              this.ec_data = [
                {
                  name: '蒸汽瞬时流量',
                  value: res.data.data
                }
              ]
            }
          }
        })
        .catch(err => {
          console.log(err)
        });
    },
    // 配电室的负荷率折线图
    getLoadLineDiagram() {
      this.$axios
        .post(this.Eelec + "/index/getLoadLineDiagram", {
          custID: sessionStorage.getItem('custId')
        })
        .then(res => {
          this.ec_data_loading = false
          if (res.data.code === 200) {
            if (res.data.data[0].rmiSamplDataRespList !== null) {
              //   this.q_data_r = false
              //   this.ec_r_data = res.data.data;
              //   this.ec_data = this.ec_r_data
              //   this.ec_r_show = true
              // } else {
              this.unit = 'kW'
              this.ec_data = [
                {
                  name: res.data.data[0].name,
                  value: res.data.data[0].rmiSamplDataRespList.dataResp
                }
              ]
              // console.log(this.ec_data)
              //   this.q_data_r = true
            }
          }
        })
        .catch(err => {
          console.log(err)
        });
    },

    // 获取企业的全场负荷标准
    getRatedPower() {
      this.$axios
        .post(this.Eelec + "/index/getRatedPower", {
          custID: sessionStorage.getItem('custId')
        })
        .then(res => {
          if (res.data.code === 200) {
            this.RatedPower = res.data.data;
            this.getRealTimeLoadRate();
          }
        })
        .catch(err => {
          console.log(err)
        });
    },
    // 当前负荷率
    getRealTimeLoadRate(sumRatedPower) {
      this.$axios
        .post(this.Eelec + "/index/getRealTimeLoadRate", {
          custID: sessionStorage.getItem('custId'),
          sumRatedPower: this.RatedPower
        })
        .then(res => {
          if (res.data.code === 200) {
            this.RatedPower_sum = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 路由跳转
    openview(path) {
      this.$router.push(path);
    }
  }
};
</script>
 <style scoped lang='scss'>
.index {
  display: flex;
  height: 100vh;
  flex-direction: column;
}
.echarts {
  background: #ffffff;
  padding: 24px;
  flex: 1;
  display: flex;
  .tab {
    display: flex;
    flex-direction: column;
    p {
      flex: 1;
      writing-mode: vertical-lr;
      letter-spacing: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0px 24px;
      // background: rgba(7, 128, 237, 1);
      // color: #ffffff;
      // color: rgba(7, 128, 237, 1);
      font-size: 16px;
      color: #666;
    }
    .active {
      background: #e5e5e5;
      // background: rgba(7, 128, 237, 1);
      // color: rgba(7, 128, 237, 1);
      // color: #ffffff;
    }
  }
  .ecline {
    flex: 1;
  }
  .UseAmount {
    h3 {
      text-align: center;
      font-size: 18px;
      color: #666;
    }
    padding: 24px 0px;
    display: flex;
    width: 300px;
    border-right: 1px solid #e5e5e5;
    // border-left: 1px solid #E5E5E5;
    flex-direction: column;
    .top {
      border-bottom: 1px solid #e5e5e5;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    span {
      color: #333;
      font-size: 18px;
      i {
        font-style: normal;
        font-size: 14px;
        color: #999999;
      }
    }
    p {
      font-size: 14px;
      color: #666;
      margin-top: 5px;
      display: flex;
      align-items: center;
      i {
        font-size: 16px;
        margin-right: 5px;
        color: #999999;
      }
    }
  }
}
.banenr_bg {
  flex: 1;
  background: url("../../../public/index_banner.jpg");
  width: 100%;
  // height: 350px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 60px;
  // position: relative;
  // margin-bottom: 10px;
  position: relative;
  z-index: 101;
  .bg_t {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 102;
    background: linear-gradient(
      180deg,
      rgba(1, 175, 194, 0.16) 0%,
      rgba(7, 128, 237, 0.83) 100%
    );
    opacity: 0.5954;
  }
  .bg_b {
    position: absolute;
    width: 100%;
    height: 70px;
    bottom: 0;
    left: 0;
    z-index: 102;
    background: linear-gradient(
      180deg,
      rgba(1, 175, 194, 0) 0%,
      rgba(7, 128, 237, 1) 100%
    );
    opacity: 0.235;
  }
  .bg_tab {
    position: absolute;
    width: 100%;
    height: 70px;
    bottom: 0;
    left: 0;
    z-index: 103;
    color: #ffffff;
    font-size: 20px;
    ul {
      // width: 1190px;
      height: 70px;
      margin: 0 auto;
      display: flex;
      li {
        height: 70px;
        flex: 1;
        display: flex;
        align-items: center;
        &:hover span {
          margin-top: -15px;
        }
        &:hover i {
          margin-top: -15px;
        }
        p {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 44px;
          border-right: 2px solid rgba(255, 255, 255, 0.2);
          i {
            margin-right: 10px;
            font-size: 30px;
            transition: all 0.28s;
          }
          span {
            transition: all 0.28s;
          }
        }
      }
    }
  }
}
</style>
